import App from "../core/App";
import UIControl from "../basic/interfaces/UIControl";
import UIComponent from "../basic/models/UIComponent";
import * as Types from "../../types";
import * as ElementHelper from "../utils/ElementHelper";
import * as CastHelper from "../utils/CastHelper";
import * as Enums from "../basic/enums";
import * as TypeHelper from "../utils/TypeHelper";
import * as EventHelper from "../utils/EventHelper";
import * as ExceptionHelper from "../utils/ExceptionHelper";

export default class UITabContent extends UIComponent implements UIControl {
    public readonly elementId: string;

    private _element: HTMLElement | null = null;
    get element() {
        return document.getElementById(this.elementId);
    }

    private _contentWindow: Window | null = null;
    get contentWindow() {
        const frameElement = (<HTMLFrameElement>document.querySelector(`#${this.elementId} .${this.app.prefix + Enums.ComponentType.TAB_CONTENT_FRAME}`));
        if (!frameElement) return null;

        return frameElement.contentWindow;
    }

    constructor(app: App, public id: string, public url: string) {
        super(app);

        if (!TypeHelper.isStringWithNotEmpty(this.id)) ExceptionHelper.assertId();

        this.url = CastHelper.stringCast(this.url);

        this.elementId = `${this.app.prefix + Enums.ComponentType.TAB_CONTENT}-${this.id}`;
    }

    present(): DocumentFragment {
        const fragment = ElementHelper.createFragment();

        const tabContentElement = ElementHelper.createElement("div");
        tabContentElement.id = this.elementId;

        ElementHelper.addClasses(tabContentElement, this.app.prefix,
            Enums.ComponentType.TAB_CONTENT
        );

        const frameContentElement = ElementHelper.createElement("iframe");
        frameContentElement.setAttribute("data-tab-id", this.id);
        frameContentElement.setAttribute("frameborder", "0");
        frameContentElement.setAttribute("scrolling", "no");
        frameContentElement.setAttribute("allowtransparency", "true");
        frameContentElement.src = this.url;

        ElementHelper.addClasses(frameContentElement, this.app.prefix,
            Enums.ComponentType.TAB_CONTENT_FRAME
        );

        this.bindEvent(frameContentElement);

        tabContentElement.appendChild(frameContentElement);

        fragment.appendChild(tabContentElement);
        return fragment;
    }

    private bindEvent(frameContentElement: HTMLIFrameElement) {
        frameContentElement.addEventListener("load", (ev: Event) => {
            const contentWindow = frameContentElement.contentWindow;
            if (!contentWindow) return;

            const item = this.app.item;
            if (item && item.useSubTitle) {
                const subTitleElement = contentWindow.document.querySelector("title");
                if (subTitleElement) {
                    item.updateTitle(subTitleElement.innerText || "未命名标题");
                }
            }
        });
    }

}